<template>
    <div class="comment_content">
        <div class="writeComment">
            <div class="writeComment_left">
                <img :src="userAvatarUrl" alt="" class="userImg">
            </div>
            <div class="writeComment_right">
                <textarea name="" id="" v-model="commentContent" :maxlength="maxLength" placeholder="想对作者说些什么" @focus="focus" @blur="blur">
                </textarea>
                <el-button v-show="showFlag1|showFlag2" size="mini" id="submit_comment" @click="submit" @mouseover.native="focus2" @mouseout.native="blur2">发布评论</el-button>
                <span v-show="showFlag1|showFlag2">还能输入{{maxLength-commentContent.length}}个字</span>
            </div>
        </div>
        <div class="commentList">
            <div class="comment" v-for="(comment,index) in commentsList" :key="index">
                <div class="comment_left">
                    <img @click="toAuthor(comment.user['_id'])" :src="comment.user.avatar" alt="" class="userImg">
                </div>
                <div class="comment_right">
                    <div class="commentAttrs">
                        <span style="cursor:pointer" @click="toAuthor(comment.user['_id'])">{{comment.user.name}}</span>
                        <span>&nbsp;&nbsp;&nbsp;</span>
                        <span>{{comment.date | formateDate}}</span>
                        <span>&nbsp;&nbsp;&nbsp;</span>
                        <span>#{{commentsList.length-index}}楼</span>
                    </div>
                    <div class="commentText">
                        {{comment.content}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Message } from 'element-ui';
export default {
    name:'Comment',
    props:['post'],
    data(){
        return {
            userAvatarUrl:this.$store.getters.user.avatar,
            commentContent:'',
            maxLength:1000,
            showFlag1:false,
            showFlag2:false,
            commentsList:[],
        }
    },
    methods:{
        focus(){
            this.showFlag1=true;
        },
        blur(){
            this.showFlag1=false;
        },
        focus2(){
            this.showFlag2=true;
        },
        blur2(){
            this.showFlag2=false;
        },
        submit(){
            if(this.commentContent==''){
                Message.warning({message:"评论不能为空~~~",showClose:true})
            }
            else{
                this.$axios.post("/api/comments/saveComment",{
                content:this.commentContent,
                post:this.post['_id'],
                })
                .then(res=>{
                    if(res.data.ok==0){
                        Message.success({message:"发布成功~~~",showClose:true});
                        this.commentContent="";
                        this.getComments();
                    }
                    else{
                        Message.error({message:"发布失败~~~",showClose:true});
                        this.commentContent="";
                    }
                })
                .catch(()=>{
                    Message.error({message:"err,发布失败~~~",showClose:true});
                    this.commentContent="";
                });
            }
            
        },
        //获取所有评论
        getComments(){
            this.$axios.post('/api/comments/getComments',{
                post:this.post['_id'],
            })
            .then(res=>{
                if(res.data.ok==1){
                    Message.error({message:"err,获取评论失败~~~",showClose:true});
                }
                else{
                    this.commentsList=res.data.data;
                    // console.log(this.commentsList);
                }
            })
        },
        //跳转到作者页面
        toAuthor(authorId){
            this.$router.push(`/home/${authorId}`);
        }
    },
    created(){
        this.getComments();
    }
}
</script>

<style scoped>
.comment_content{
    width:100%;
    height:auto;
    margin-top:5px;
    box-sizing: border-box;
    border:1px solid #ccc;
    padding: 10px 20px;
}
.writeComment{
    width:100%;
    display: flex;
}
.writeComment_left{
    width:30px;
    height:auto;
    float: left;
}
.writeComment_right{
    width:calc(100% - 30px);
    height:auto;
    float: right;
}
.writeComment_right textarea{
    width:100%;
    height:70px;
    resize: none;
    overflow: auto;
}
.writeComment_right span{
    float:right;
    margin-right:10px;
    font-size: 10px;
    margin-top:10px;
    color:#666;
}
#submit_comment{
    float:right;
    background-color: #a20a12 ;
    color: #fff;
}
#submit_comment:hover{
    background-color:#f21f2b;
}
.userImg{
    width:20px;
    height:20px;
    border-radius: 50% 50%;
    cursor:pointer;
    background-size: cover;
}
.commentList{
    width:100%;
    height:auto;
}
.comment{
    width:100%;
    display: flex;
    border-bottom: 1px dashed #ccc;
    margin-top:15px;
}
.comment_left{
    width:30px;
    height:auto;
    float: left;
}
.comment_right{
    width:calc(100% - 30px);
    height:auto;
    float: right;
}
.commentAttrs{
    width:100%;
    height:auto;
}
.commentAttrs span{
    font-size: 10px;
    color:#666;
}
.commentText{
    width:100%;
    box-sizing: border-box;
    padding: 10px 0px;
    margin:5px 0;
    font-size: 14px;
    color:#4d4d4d;
}
</style>

